<template>
  <div class="ht-matrix-full" @click="$emit('screen')">
    <svg-icon :visible="isOpen" :path="openPath" width="28" height="28" />
    <svg-icon :visible="isExit" :path="exitPath" width="28" height="28" />
  </div>
</template>

<script>
import SvgIcon from './SvgIcon.vue';

export default {
  components: { SvgIcon },
  props: {
    show: {
      type: Boolean,
      default: true,
    },
  },
  data() {
    return {
      openPath:
        'M512 0C230.4 0 0 230.4 0 512s230.4 512 512 512 512-230.4 512-512S793.6 0 512 0z m192 665.6c10.666667 10.666667 10.666667 27.733333 0 38.4s-27.733333 10.666667-38.4 0L512 550.4 358.4 704c-10.666667 10.666667-27.733333 10.666667-38.4 0s-10.666667-27.733333 0-38.4l153.6-153.6-153.6-153.6c-10.666667-10.666667-10.666667-27.733333 0-38.4s27.733333-10.666667 38.4 0l155.733333 155.733333 153.6-153.6c10.666667-10.666667 27.733333-10.666667 38.4 0s10.666667 27.733333 0 38.4L550.4 512l153.6 153.6z',
      exitPath:
        'M312.32 40.448H61.952c-18.944 0-34.304 15.36-34.304 34.304V325.12c0 18.944 15.36 34.304 34.304 34.304h13.312c18.944 0 34.304-15.36 34.304-34.304V183.296l247.296 247.296c12.288 12.288 32.256 12.288 44.544 0l16.384-16.384c12.288-12.288 12.288-32.256 0-44.544L169.984 122.368H312.32c18.944 0 34.304-15.36 34.304-34.304V74.752c0-18.944-15.36-34.304-34.304-34.304zM27.648 706.56v250.368c0 18.944 15.36 34.304 34.304 34.304H312.32c18.944 0 34.304-15.36 34.304-34.304v-13.312c0-18.944-15.36-34.304-34.304-34.304H169.984L417.28 662.016c12.288-12.288 12.288-32.256 0-44.544l-16.384-16.384c-12.288-12.288-32.256-12.288-44.544 0L109.056 848.384V706.048c0-18.944-15.36-34.304-34.304-34.304H61.44c-18.432 0.512-33.792 15.872-33.792 34.816z m687.616 283.648l250.368 1.536c18.944 0 34.304-15.36 34.304-34.304v-13.312l1.024-237.056c0-18.944-15.36-34.304-34.304-34.304h-13.312c-18.944 0-34.304 15.36-34.304 34.304l-0.512 142.336-245.76-248.32c-12.288-12.288-32.256-12.288-44.544 0l-16.384 16.384c-12.288 12.288-12.288 32.256 0 44.544l245.76 248.32-142.336-0.512c-18.944 0-34.304 15.36-34.304 34.304v13.312c0 17.408 15.36 32.768 34.304 32.768z m286.72-665.6l-0.512-250.368c0-18.944-15.36-34.304-34.304-34.304h-13.312l-237.056 0.512c-18.944 0-34.304 15.36-34.304 34.304v13.312c0 18.944 15.36 34.304 34.304 34.304l142.336-0.512-246.272 247.808c-12.288 12.288-12.288 32.256 0 44.544l16.384 16.384c12.288 12.288 32.256 12.288 44.544 0l246.272-247.808 0.512 142.336c0 18.944 15.36 34.304 34.304 34.304h13.312c18.432-0.512 33.792-15.872 33.792-34.816z',
    };
  },
  computed: {
    isOpen() {
      const { show } = this;
      return show;
    },

    isExit() {
      const { show } = this;
      return !show;
    },
  },
};
</script>

<style lang="scss" scoped>
.ht-matrix-full {
  position: absolute;
  z-index: 18;
  top: 0;
  right: 0;
  padding: 16px;
  width: 28px;
  height: 28px;
  cursor: pointer;
  transition: 0.2s ease-in-out;
}
</style>
